<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
#app{width:800px;margin:60px auto;}
.form-group{line-height: 40px;}
.form-group label{display: inline-block; width:60px;text-align: right;}
.form-ground label{display: inline-block; width:60px;text-align: right;}
input{border:1px solid #ccc;line-height: 24px;}
button{background-color: green;line-height: 24px;color:#fff;border:none;margin:4px;}
select{padding:4px;margin:4px;}
table{border:1px solid #ccc;border-collapse: collapse;margin-left:64px;}
table tr th{background-color: green;color:#fff;padding:6px;}
table tr td{padding:6px;}
    </style>
</head>
<body>
<div id="app">
    <legend>Creat New Person</legend>
    <div class="form-group">
        <label>Name:</label>
        <input type="text" v-model="newPerson.name">
    </div>
    <div class="form-ground">
        <label>Age:</label>
        <input type="text" v-model="newPerson.age">
    </div>
    <div class="form-ground">
        <label>Sex:</label>
        <select v-model="newPerson.sex">
            <option value="Male">Male</option>
            <option value="FeMale">FeMale</option>
        </select>
    </div>
    <div class="form-ground">
        <label></label>
        <button @click="createPerson">Create</button>
    </div>
    <table border="1">
        <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="person in people">
            <td>{{person.name}}</td>
            <td>{{person.age}}</td>
            <td>{{person.sex}}</td>
            <td><button @click="deletePerson($index)">Delete</button></td>
        </tr>
        </tbody>
    </table>
</div>
<script>
var vm=new Vue({
    el:'#app',
    data:{
        people:[
            {name:'Jack',age:30,sex:'Male'},
            {name:'Bill',age:26,sex:'Male'},
            {name:'Tracy',age:22,sex:'FeMale'},
        ],
        newPerson:{
            name:'',
            age:0,
            sex:'Male'
        }
    },
    methods:{
        createPerson:function(){
         //添加新内容
            this.people.push(this.newPerson);
            //添加完newPerson对象后，重置newPerson对象
            this.newperson={name:'',age:0,sex:'Male'}
        },
        deletePerson:function(index){
          //删一个数组元素
            this.people.splice(index,1);
        }
    }

})
</script>
</body>
</html>